<template>
  <div class="c-h c-pf c-p-t0 c-p-l0 c-p-r0 c-m-0auto c-w100 c-maxw640 c-pz10000">
    <div v-if="showShare">
      <div class="masker" @click="closeShare()"></div>
      <div class="c-mh24 c-p">
        <div class="content c-ph24 c-bg-white c-br10 c-pv20">
          <div class=""><img src="@/assets/i/wap/common/ico-guide.png"></div>
          <p class="c-fs28">温馨提示</p>
          <p class="c-fs22 c-mt10 c-flex-row">点击右上角的
            <img src="@/assets/i/wap/common/weixin-share1.png" class="imgbox">或者
            <img src="@/assets/i/wap/common/weixin-share2.png" class="imgbox">分享
          </p>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'ShareMasker',
  components: {

  },
  props: ['isShowShare'],
  beforeCreate() {

  },
  data() {
    return {
      showShare: false
    }
  },
  created() {
    this.showShare = this.isShowShare;
    if (this.showShare == true) {
      let $this = this;
      setTimeout(function () {
        $this.showShare = false;
        $this.$emit('closeShare');
      }, 3000);
    }
  },
  mounted() {

  },
  computed: {

  },
  watch: {

  },
  methods: {
    closeShare: function () {
      this.$emit('closeShare');
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.content {
  width: 90%;
  position: fixed;
  top: 1rem;
  left: 5%;
  z-index: 99999;
}
.content > div > img {
  width: 1.2rem;
  height: 2.2rem;
  position: absolute;
  top: 0.4rem;
  right: 0.3rem;
  z-index: 1004;
}
.imgbox {
  width: 1.6rem;
  height: 0.8rem;
  margin-left: 0.2rem;
  margin-right: 0.4rem;
}
.masker {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 99998;
  width: 100%;
  max-width: 16rem;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}
</style>
